<template>
  <div class="app-container home">
    <el-tabs :tab-position="tabPosition">
      <el-tab-pane label="欢迎页">
        <div class="index-item">
          <el-image
            class="item-img"
            :src="indexImg"
            fit="fill">
          </el-image>
        </div>
      </el-tab-pane>
      <el-tab-pane label="域名授权说明">
        <h2>域名授权说明</h2>
        <p>步骤1：点击右侧 <b>授权中心</b> 菜单</p>
        <p>步骤2：选择所需 <b>授权项目</b> 和 <b>产品规格</b></p>
        <p>步骤3：填写授权域名，例如：baidu.com</p>
        <p>步骤4：点击下方支付方式，支付成功后即可成功授权。</p>
        <p>步骤5：在 <b>我的授权</b> 中可以看到详细的授权信息，将授权编号填写到平台上，即可生效。</p>
      </el-tab-pane>
      <el-tab-pane label="RSA授权说明">
        <h2>RSA授权说明</h2>
        <p>步骤1：点击右侧 <b>授权中心</b> 菜单</p>
        <p>步骤2：选择所需 <b>授权项目</b> 和 <b>产品规格</b></p>
        <p>步骤3：填写验证码，注意：验证码是由平台生成的唯一验证码</p>
        <p>步骤4：点击下方支付方式，支付成功后即可成功授权。</p>
        <p>步骤5：在 <b>我的授权</b> 中可以看到详细的授权信息，将激活码填写到平台上，即可生效。</p>
      </el-tab-pane>
      <el-tab-pane label="平台信息" v-if="isAdmin == true">
        <h2>平台激活信息</h2>
        <h4>当前版本：<b>开源版 1.0.0</b></h4>
        <h4>
          激活状态：
          <b style="cursor: pointer;">
            <span style="color: green">已激活</span>
          </b>
        </h4>
        <h4>
          激活到期：<b>{{ endTime }}</b>
        </h4>

        <br />
        <br />

        <h4>
          亲！开源不易，好用请打赏，给作者一个支持！或者可以使用付费版，付费版会不断持续更新，以及提供优质的售后服务！
        </h4>
        <el-row>
          <el-col :span="4">
            <div class="block">
              <el-image :src="zfbIndexImg"></el-image>
            </div>
          </el-col>
          <el-col :span="1" style="min-height:1px;">

          </el-col>
          <el-col :span="4">
            <div class="block">
              <el-image :src="wxIndexImg"></el-image>
            </div>
          </el-col>
        </el-row>



      </el-tab-pane>
    </el-tabs>



  </div>
</template>

<script>
import logoImg from '@/assets/images/back.png';
import zfbImg from '@/assets/images/zfb.jpg';
import wxImg from '@/assets/images/wx.jpg';
import { getUserProfile } from "@/api/system/user";

export default {
  name: "Index",
  data() {
    return {
      tabPosition:"right",
      indexImg: logoImg,
      zfbIndexImg: zfbImg,
      wxIndexImg: wxImg,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      act: false,
      isAdmin: false,
      endTime:"永久"
    };
  },
  created() {
    this.init();
  },
  methods: {
    init(){
      getUserProfile().then(response => {
        this.user = response.data;
        //获取是否激活
        if(this.user.userId == 1){
          this.isAdmin = true;
          this.$notify({
            title: '信息',
            message: '开源不易，好用请点赞 或 打赏！',
            type: 'info',
            duration: 3000
          });
        }
      });
    },
    goTarget(href) {
      window.open(href, "_blank");
    }
  }
};
</script>

<style scoped lang="scss">
.index-item {
  margin: 30px 100px 30px 30px;
  & .item-img {
    width: 80%;
  }
}
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>

